<template>
	<view>
		<u-navbar :border-bottom="false" title="昵称头像" :title-size="36" :title-bold="true" :title-color="textColor" :background="{backgroundColor: bgColor}">
		</u-navbar>
		<u-form class="container" :model="form" ref="profileForm" :error-type="['toast']">
			<u-form-item label-position="top" label="昵称" :label-style="labelStyle" prop="nickname">
				<u-input v-model="form.nickname" placeholder="请输入你的昵称" />
			</u-form-item>
			<u-form-item label-position="top" label="头像" prop="resourceId" :label-style="labelStyle">
				<u-input placeholder="点击上传头像" :disabled="true" />
				<!-- <u-upload ref="avatarUploadRef" slot="right" width="160" height="160" :max-count="1"></u-upload> -->
				<u-upload
					ref="avatarUploadRef"
					slot="right"
					:action="baseUrl + 'api/Resource/UploadToOss'"
					:file-list="fileList"
					:header="headerToken"
					:max-count="1"
					name="image"
					:deletable="true"
					:show-progress="false"
					@on-success="onSuccess"
					@on-remove="onRemove"
					width="160"
					height="160"
				></u-upload>
			</u-form-item>
		</u-form>
		<!--页面加载动画-->
		<akLoading isFullScreen :active="loading"></akLoading>
		<set-submit-bt @click="handleSubmit" />
	</view>
</template>

<script>
	import SetSubmitBt from '@/components/set-submit-bt/index.vue'
	import { useUserStore } from '@/store/user.js';
	import { mapState } from 'pinia';
	export default {
		components: { SetSubmitBt },
		data() {
			return {
				loading:false,
				form: {
					resourceId: '',
					headImgChanged: true
				},
				rules: {
					nickname: [
						{ required: true, message: '请您添加昵称', trigger: 'blur' },
						{
							pattern: /^[\u4e00-\u9fa5\w]{2,10}$/,
							message: '昵称要求2~10个字母数字或中文字符',
							trigger: 'blur'
						}
					]
				},
				fileList: [],
				labelStyle: {
					fontSize: '30rpx',
					fontWeight: 'bold'
				},
				buttonStyle: {
					height: '90rpx',
					color: '#FFFFFF',
					background: this.linearGradient
				}
			}
		},
		computed:{
			...mapState(useUserStore, {
				storeUser: 'user',
				headerToken(store){
					return {
						Authorization: 'Bearer ' + store.user.access_token,
					}
				},
				updateInfo:'updateInfo'
			})
		},
		onLoad() {
			if (this.storeUser.headImg) {
				this.fileList.push({url: this.storeUser.headImg})
			}
			// 截取resourceId
			let str = this.storeUser.headImg
			if (str) {
				let index = str.lastIndexOf('=')
				str = str.substring(index + 1, str.length)
				this.form.resourceId = str
			}
			this.form.id = this.storeUser.id;
			this.form.nickname = this.storeUser.nickname;
		},
		onReady() {
			this.$refs.profileForm.setRules(this.rules);
		},
		methods: {
			// 图片上传成功触发
			onSuccess(data) {
				console.log(data)
				this.form.resourceId = data.data[0].id
			},
			// 图片移除时触发
			onRemove() {
				this.form.resourceId = ''
			},
			handleSubmit() {
				console.log(123123);
				this.loading = true;
				if (!this.form.resourceId) {
					this.loading = false;
					this.$u.toast('请您选择头像')
					return false;
				}
				this.$refs.profileForm.validate(async (valid) => {
					if (!valid){
						this.loading = false;
						return false;
					} 
					try{
						if (this.form.resourceId == this.storeUser.headImg) {
							this.form.headImgChanged = false;
							delete this.form.resourceId;
						}else{
							this.form.headImgChanged = true;
						}
						const res = await this.$http.post('api/User/ChangeUserInfo', this.form);
						this.loading = false;
						if (!res) return;
						this.$http.get('api/User/GetUserClaim').then(info=>{
							// this.$store.dispatch('user/updateInfo', info);
							this.updateInfo(info);
						}).catch(err=>{
						
						});
						this.$u.toast('保存成功', 1000, 'success')
						this.$mHelper.delayedJump('/pages/mine/index', 'switchTab')
					}catch(e){
						this.loading = false;
					}
					
				})
			}
			
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.container {
		padding: 0rpx 70rpx;
	}
	::v-deep .u-form-item--right__content {
		align-items: flex-end;
	}
</style>
